<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <!--学过的指令
      v-bind :   单向绑定解析表达式，可简写为   :xxx
      v-model:    双向绑定
      v-for      :遍历
      v-on        :绑定事件监听，简写为@
      v-if        :条件渲染（动态控制节点是否存在）
      v-else      :条件渲染（动态控制节点是=是否存在）
      v-show      :条件渲染（动态控制节点是否展示）
      v-text      :跟插值语法一样,用于标签体文本内容


    -->

    <h2>姓名:{{name}}</h2>
    <h2 v-text="name"></h2>
    <!--会替换标签体中的内容-->
    <h2 v-text="name">姓名:</h2>
    <!--变量只会哦被当作不同文本展示,不会被解析成标签-->
    <h2 v-text="htmlStr"></h2>

  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el:'#root',
      data:{
        name:'张三',
        htmlStr:'<span>htmlStr<span/>'
      }
    });
  </script>
</body>
</html>
